<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">

    <link rel="stylesheet" href="/dist/application.css?v=<%= assets_version %>" async="async" defer="defer">
    <script src="/dist/application.js?v=<%= assets_version %>" media="all"></script>

    <title>cryMPD</title>
  </head>
  <body>
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
      <div class="container-fluid">
        <div id="navbarNavDropdown" class="collapse navbar-collapse">
          <div class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown">
              <a class="navbar-brand nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="material-icons play_circle_fill"></i>
                cryMPD
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li class="nav-item dropdown">
                  <a class="dropdown-item" href="#" id="updateDB">Update</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    About
                  </a>
                </li>
              </ul>
            </li>
          </div>

          <div id="mediaControls">
            <div class="btn-group dropdown" id="volumeMenu">
              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="material-icons volume_up"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-end bg-lite-dark" tabindex="0">
                <h2 class="dropdown-header text-light">
                  <span>Volume</span>: <span id="volumePrct"></span>
                </h2>
                <div class="btn">
                  <input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeRange">
                </div>
              </div>
            </div>

            <div class="btn-group dropdown" id="playlistMenu">
              <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="material-icons queue_music"></i>
              </button>

              <div class="dropdown-menu dropdown-menu-end bg-lite-dark playlist-menu" tabindex="0">
                <table class="table table-dark table-hover" id="playlistTable">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Artist</th>
                      <th scope="col">Title</th>
                      <th scope="col"><i class="material-icons timer"></i></th>
                    </tr>
                  </thead>
                  <tbody>
                  <!-- generated by JS -->
                  </tbody>
                </table>

              </div>
            </div>
          </div>
        </div>

      </div>
    </nav>

    <div class="container">
      <div class="card" id="currentSong">
        <div class="card-header">
          <span>Playback</span>
        </div>
        <div class="card-body">
          <div class="d-flex flex-column flex-md-row">
            <div class="mb-3 mb-md-0 d-flex justify-content-center">
              <div class="thumbnail">
                <img class="me-md-3" id="albumCover" src="/albumart">
              </div>
            </div>

            <div class="container-fluid">
              <div class="songInfo">
                <h5 class="mt-0" id="title"></h5>

                <strong>Artist:</strong>
                <pre id="artist"></pre>

                <strong>Album:</strong>
                <pre id="album"></pre>

                <strong>Date:</strong>
                <pre id="date"></pre>
              </div>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="d-flex">
            <div class="container-fluid">
              <input type="range" min="0" max="1000" step="1" class="form-control-range w-100" id="progressBar">
            </div>
            <div class="timestamp"></div>
          </div>
        </div>
      </div>
      <div class="d-flex flex-column justify-content-center" id="playbackControls">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-secondary" id="toggleRandom" data-toggle="tooltip" data-placement="bottom" title="Random">
            <i class="material-icons shuffle"></i>
          </button>
          <button type="button" class="btn btn-secondary" id="prevSong" data-toggle="tooltip" data-placement="bottom" title="Previous Track">
            <i class="material-icons skip_previous"></i>
          </button>
          <button type="button" class="btn btn-secondary" id="togglePlayPause" data-toggle="tooltip" data-placement="bottom" title="Play/Pause">
            <i class="material-icons play_circle_fill"></i>
          </button>
          <button type="button" class="btn btn-secondary" id="nextSong" data-toggle="tooltip" data-placement="bottom" title="Next Track">
            <i class="material-icons skip_next"></i>
          </button>
          <button type="button" class="btn btn-secondary" id="toggleRepeat" data-toggle="tooltip" data-placement="bottom" title="Repeat">
            <i class="material-icons repeat"></i>
          </button>
          <button type="button" class="btn btn-secondary" id="toggleSingle" data-toggle="tooltip" data-placement="bottom" title="Single">
            <i class="material-icons repeat_one"></i>
          </button>
        </div>
      <div>
    </div>

    <!-- About Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">About</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <table class="table table-sm" tabindex="0">
              <tbody>
                <tr>
                  <td colspan="2" class="pt-3">
                      <h5>Database statistics</h5>
                  </td>
                </tr>
                <tr>
                  <th>Artists</th>
                  <td id="mpdstats_artists"></td>
                </tr>
                <tr>
                  <th>Albums</th>
                  <td id="mpdstats_albums"></td>
                </tr>
                <tr>
                  <th>Songs</th>
                  <td id="mpdstats_songs"></td>
                </tr>
                <tr>
                  <th>DB play time</th>
                  <td id="mpdstats_dbPlaytime"></td>
                </tr>
                <tr>
                  <th>DB updated</th>
                  <td id="mpdstats_dbUpdated"></td>
                </tr>
                <tr>
                  <td colspan="2" class="pt-3">
                      <h5>Playback statistics</h5>
                  </td>
                </tr>
                <tr>
                  <th>MPD uptime</th>
                  <td id="mpdstats_uptime"></td>
                </tr>
                <tr>
                  <th>Play time</th>
                  <td id="mpdstats_playtime"></td>
                </tr>
                <tr>
                  <td colspan="2" class="pt-3">
                      <h5>Other information</h5>
                  </td>
                </tr>
                <tr>
                  <th>MPD Protocol version</th>
                  <td id="mpdInfo_version"></td>
                </tr>
                <tr>
                  <th>Crystal version</th>
                  <td><%= Crystal::VERSION %></td>
                </tr>
                <tr>
                  <th>Source code</th>
                  <td><a href="https://github.com/mamantoha/cryMPD" target="_blank">GitHub</a></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
